<template>
  <div id="app">
    <div id="view-box" ref="viewBox">
      <div class="router-view" :class="{ tabbarHide: !isTabbar }">
        <keep-alive exclude="market-detail" include="write-article">
          <!-- <transition :name="transitionName"> -->
          <router-view class="bg-content-color"></router-view>
          <!-- </transition> -->
        </keep-alive>
        <share-prompt />
      </div>
      <!-- <tabbar v-show="tabbarVisible"></tabbar> -->
      <!-- <back-home v-if="backHomeShow"></back-home> -->
      <tabbar></tabbar>
    </div>
    <van-popup v-model="newMsgPop" :overlay="false" position="top" class="new-msg-popup">
      <new-msg-popup :msg="newMsgObject"></new-msg-popup>
    </van-popup>
    <auth-mini />
  </div>
</template>
<script>
import NewMsgPopup from 'COMP/Message/NewMsgPopup'
import Tabbar from 'COMP/Common/Tabbar'
import BackHome from 'COMP/Common/BackHome'
import SharePrompt from 'COMP/Common/SharePrompt'
import AuthMini from 'COMP/Common/AuthMini'

import { mapGetters } from 'vuex'
import { webimLogin, callbackaddMsgCount } from '@/utils/im/receive_new_msg.js'
export default {
  data() {
    return {
      newMsgPop: false,
      newMsgObject: {},
      isTabbar: true,
      tabbarVisible: false,
      backHomeShow: false,
      transitionName: ''
    }
  },
  components: {
    NewMsgPopup,
    Tabbar,
    BackHome,
    SharePrompt,
    AuthMini
  },
  mounted() {
    this.getTerminalType()
  },
  methods: {
    /**
     * 获取终端类型
     */
    getTerminalType() {
      ;(navigator.userAgent.indexOf('iPhone') !== -1 || navigator.userAgent.indexOf('iPad') !== -1) && this.addTouchEventListener()
    },

    /**
     * ios添加touch事件监听
     */
    addTouchEventListener() {
      this.iosPageSpringback(document.querySelector('.router-view'))
      // document.body.addEventListener('touchmove', evt => !evt._isScroller && evt.preventDefault() )
    },

    /**
     * 解决ios页面回弹
     */
    iosPageSpringback(el) {
      el.addEventListener('touchstart', () => {
        let top = el.scrollTop
        let totalScroll = el.scrollHeight
        let currentScroll = top + el.offsetHeight
        if (top === 0) {
          el.scrollTop = 1
        } else if (currentScroll === totalScroll) {
          el.scrollTop = top - 1
        }
      })
      el.addEventListener('touchmove', evt => {
        if (el.offsetHeight < el.scrollHeight) {
          evt._isScroller = true
        }
      })
    }
  },
  watch: {
    $route(to, from) {
      if (to.path != '/' && to.path != '/dynamics' && to.path.indexOf('/register') == -1 && to.path.indexOf('/wx') == -1) {
        this.backHomeShow = true
      } else {
        this.backHomeShow = false
      }
      // if (to.meta.tabbar && to.meta.tabbar.show) {
      //   this.tabbarVisible = true
      //   setTimeout(() => {
      //     this.isTabbar = true
      //   }, 500)
      // }
      let topath = to.path.split('/')
      let frompath = from.path.split('/')
      if (topath.length > frompath.length) {
        this.transitionName = 'slide-left'
        setTimeout(() => {
          this.isTabbar = false
          this.tabbarVisible = false
        }, 200)
      } else if (topath.length < frompath.length) {
        this.transitionName = ''
      } else {
        this.transitionName = ''
      }
    },
    '$store.getters.newMsgStatus': function(v) {
      let msgContent = this.$store.getters.newMsgContent
      if (this.$route.path == '/custom/message/message') {
        //当前在聊天页
        return (this.newMsgPop = false)
      }
      if (msgContent.desc == 6 && this.$route.path == '/write-article') {
        // console.log(this.$store.getters.newMsgContent, 'this.$store.getters.newMsgContent')
        return (this.newMsgPop = false)
      }
      if (msgContent.desc == 1 || msgContent.desc == 2 || msgContent.desc == 3) {
        this.newMsgPop = v
        let data = ''
        let desc = msgContent.desc
        let avatar = ''
        let name = ''
        let clientId = msgContent.clientId.split('_')[1]
        if (desc == 2) {
          //语音
          let tmp = JSON.parse(msgContent.ext)
          let userInfo = tmp.userInfo
          avatar = userInfo.avatarUrl
          name = userInfo.name
          data = msgContent.data
        } else if (desc == 5) {
          //动态
          let tmp = JSON.parse(msgContent.data)
          avatar = tmp.avatarUrl
          name = tmp.clientName
          clientId = tmp.clientId
          data = tmp.content
        } else {
          //文本消息 楼盘 消息已上报
          if (!msgContent.ext) {
            return
          }
          let userInfo = JSON.parse(msgContent.ext)
          avatar = userInfo.avatarUrl
          name = userInfo.name
          data = msgContent.data
        }
        this.newMsgObject = {
          data: data,
          desc: desc,
          avatar: avatar,
          name: name,
          clientId: clientId
        }
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'addUserLoginLog'])
  }
}
</script>
<style lang="less">
@import '~normalize.css/normalize.css';
@import './assets/css/reset.less';
@import './assets/css/common.less';
@import './assets/icon/iconfont.css';
@import './assets/css/layout.less';

// 转场动画
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  // 启用硬件加速
  will-change: transform;
  transition: all 300ms;
  // position: fixed;
  // left: 0;
  // top: 0;
}
.slide-right-enter {
  opacity: 0;
  // transform: translateX(-100%);
  transform: translateX(-100%);
  transition-timing-function: ease-in;
}
// .slide-right-leave-active {
// 安卓手机上同时进行离开和进入会出现闪白现象，暂时不启用离开动画
// opacity: 0;
// transform: translate(100%, 0);
// transition-timing-function:  cubic-bezier(0.5,0,1,1);
// }
.slide-left-enter {
  opacity: 0;
  transform: translateX(100%);
  transition-timing-function: ease-in;
}
// .slide-left-leave-active {
// 安卓手机上同时进行离开和进入会出现闪白现象，暂时不启用离开动画
// opacity: 0;
// transition-timing-function:  cubic-bezier(0.5,0,1,1);
// transform: translate(-100%, 0);
// }

html {
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
}
.van-search__content {
  background: #f5f5f5 !important;
  border-radius: 6px !important;
}
.van-search .van-cell {
  border-radius: 6px !important;
}

.bg-content-color {
  background: #fff;
}
html {
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
}
.van-search__content {
  background: #f5f5f5 !important;
  border-radius: 6px !important;
}
.van-search .van-cell {
  border-radius: 6px !important;
}
/**{ touch-action: pan-y; }*/
#app {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  .new-msg-popup {
    height: 50px;
    width: 80%;
    margin: 32px 0;
    border-radius: 25px;
    background: rgb(81, 135, 218);
    opacity: 0.92;
  }
  #view-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    > .router-view {
      position: relative;
      // margin-bottom: 50px;
      // max-height: calc(100% - 50px);
      // margin-bottom: -1px;
      width: 100%;
      // height: 100%;
      flex: 1;
      // overflow-x: hidden;
      // overflow-y: scroll;
      > div {
        position: absolute;
        width: 100%;
        // min-height: 100%;
        height: 100%;
        top: 0;
        overflow-y: scroll;
      }
    }
    > .tabbarHide {
      margin-bottom: 0px;
      overflow-x: hidden;
      overflow-y: scroll;
      // overflow: auto;
      // z-index: 10000;
    }
  }
}
</style>
